<div *ngIf="!mail" class="toolbar" fxLayout="row" fxLayoutAlign="start center">
  <mat-checkbox class="checkbox"></mat-checkbox>
  <span fxFlex></span>
  <span>1 - 25 of {{ itemCount }}</span>
  <div class="chevrons">
    <button mat-icon-button>
      <mat-icon>chevron_left</mat-icon>
    </button>
    <button mat-icon-button>
      <mat-icon>chevron_right</mat-icon>
    </button>
  </div>
</div>

<div *ngIf="mail" class="toolbar toolbar-detail" fxLayout="row" fxLayoutAlign="start center">
  <div class="icon-group">
    <button class="back" mat-icon-button matTooltip="返回" (click)="onForwardTriggered()">
      <mat-icon>arrow_back</mat-icon>
    </button>
  </div>
  <div class="icon-group">
    <button class="archive" mat-icon-button matTooltip="收取">
      <mat-icon>archive</mat-icon>
    </button>
    <button class="spam" mat-icon-button matTooltip="标记垃圾">
      <mat-icon>backspace</mat-icon>
    </button>
    <button class="delete" mat-icon-button matTooltip="删除">
      <mat-icon>delete</mat-icon>
    </button>
  </div>
  <div class="icon-group">
    <button class="archive" mat-icon-button matTooltip="移动到">
      <mat-icon>folder</mat-icon>
    </button>
    <button class="spam" mat-icon-button matTooltip="标签" [matMenuTriggerFor]="mailLabels">
      <mat-icon>label</mat-icon>
    </button>
  </div>
  <button class="delete" mat-icon-button [matMenuTriggerFor]="mailOptions">
    <mat-icon>more_vert</mat-icon>
  </button>
  <span fxFlex></span>
  <span>1 - 25 of 0</span>
  <div class="chevrons">
    <button mat-icon-button>
      <mat-icon>chevron_left</mat-icon>
    </button>
    <button mat-icon-button>
      <mat-icon>chevron_right</mat-icon>
    </button>
  </div>
</div>

<mat-menu #mailOptions="matMenu">
  <button mat-menu-item> <mat-icon>markunread_mailbox</mat-icon>标记未读 </button>
  <button mat-menu-item> <mat-icon>label</mat-icon> 标签 </button>
  <mat-divider></mat-divider>
  <button mat-menu-item> <mat-icon>delete</mat-icon> 删除 </button>
</mat-menu>

<mat-menu #mailLabels="matMenu">
  <button mat-menu-item> <mat-icon>markunread_mailbox</mat-icon>标记未读 </button>
  <button mat-menu-item> <mat-icon>label</mat-icon> 标签 </button>
  <mat-divider></mat-divider>
  <button mat-menu-item> <mat-icon>delete</mat-icon> 删除 </button>
</mat-menu>
